<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(img/login1.jpg);
            background-size: 100% 660px;
        }

        input {
            outline: none;
            border: 1px solid rgb(150, 148, 148);
            border-radius: 10px;
        }

        button {
            outline: none;
        }

        a {
            text-decoration: none;
        }

        .container {
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 360px;
            border: 1px solid rgb(163, 151, 151);
            border-radius: 10px;
            overflow: hidden;
            background-color: #fff;
            padding: 0;
        }


        .top_user {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: rgb(56, 78, 136);
            font-size: 18px;
            font-weight: 600;
            float: left;
            cursor: pointer;
            color: white;
            padding-left: 10px;
        }

        .form-group {
            position: relative;
            margin-left: 10px;
        }


        .form-group label {
            display: block;
            position: relative;
            left: 0px;
            top: 10px;
            font-size: 16px;
            color: black;
        }


        .form-control {
            width: 350px;
            height: 35px;
        }

        .textCode {
            width: 70px;
            height: 30px;
            line-height: 30px;
            background-color: gray;
            color: white;
            float: left;
            margin-left: 37px;
            margin-top: 20px;
            text-align: center;
        }

        .btn {
            position: relative;
            top: 10px;
            left: 0px;
            width: 100px;
            height: 35px;
            cursor: pointer;
            color: white;
            font-size: 16px;
            outline: none;
            border-radius: 5px;
            background-color: rgb(36, 115, 180);
        }

        .btn:focus {
            outline: none;
            color: white;
            border: 0 none;
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <div class="top_user">用户注册
            <div class="form-group">
                <label>用户名:</label>
                <input type="text" class="form-control" v-model="username">
                <label>密码:</label>
                <input type="password" class="form-control" v-model="password">
                <div class="textCode">弱</div>
                <div class="textCode">中</div>
                <div class="textCode">强</div>
                <button class="btn" @click="register">注册</button>
            </div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: ''
        },
        methods: {
            register() {
                this.$http.post('php/user_register.php', {
                    username: this.username,
                    password: this.password
                }, {
                    emulateJSON: true
                }).then(function (result) {
                    if (result.body.code == 0) {
                        alert('注册成功,2s后跳转至登录页面');
                        setTimeout(function () {
                            location.href = "login.html";
                        }, 2000);
                    } else {
                        alert(result.body.message)
                    }
                })
            }
        }
    })

    var textCodes = document.querySelectorAll('.textCode');
    var password = document.querySelectorAll('.form-control');
    //判断密码等级
    password[1].onkeyup = function () {
        var value = this.value;
        //每次触发前，都将上一次样式清空
        for (var i = 0; i < textCodes.length; i++) {
            textCodes[i].style.backgroundColor = 'gray';
        }
        if (value.length >= 6) {
            //开始密码强度验证
            if (/^\d+$/.test(value) || /^[a-z]+$/.test(value) || /^[A-Z]+$/.test(value)) {
                textCodes[0].style.backgroundColor = 'orange';
            } else if (/\d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) {
                textCodes[2].style.backgroundColor = 'orange';
            } else {
                textCodes[1].style.backgroundColor = 'orange';
            }
        }
    }
</script>

</html>